<template>
   <div  class="like">
        <span>猜你喜欢</span>
           <ul>
              <li v-for="item in likeListData" :key="item.id">
                <img :src="item.imgUrl" alt="">
                <h3>{{ item.name }}</h3>
                <p>￥{{ item.price }}</p>
              </li>
           </ul>

       </div>
</template>

<script setup>

import {ref,reactive,defineProps} from 'vue';

const props = defineProps({
likeListData: Object
})


</script>

<style lang="scss" scoped>
  .like{
    margin-top: 20px;
    text-align: center; 
      span{
        margin-top: 30px;
        font-size: 20px;
        font-weight: 700;
      }
    ul{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;


      li{
        margin-top: 20px;
        img{
          width: 150px;
          height: 150px;
        }  
        h3{
          font-size: 16px;
          font-weight: 400;
        }
        p{
          font-size: 15px;
          color: red;
          margin-top: 15px;
        }
      }
    }




  }
</style>